<template>
    <view class="winning_information">
		<uni-nav-bar :fixed="true" status-bar :border="false" left-icon="left" title="中奖记录" @clickLeft="back" />
        <view class="header">
            <p class="zj">未中奖</p>
            <p class="text">送你一次免费抽奖</p>
            <p class="text">奖品名称  奖品名称  奖品名称</p>
            <button>去抽一次</button>
        </view>
        <view class="list">
            <view class="content">
                <p class="title">幸运抽奖，233人抽奖</p>
                <view class="row">
                    <view class="info clearfix">
                        <image src="/static/test/1.png"></image>
                        <view class="detail fl">
                            <p>大美丽</p>
                            <p>奖品信息 大产品</p>
                        </view>
                    </view>
                    <view class="info clearfix">
                        <image src="/static/test/1.png"></image>
                        <view class="detail fl">
                            <p>大美丽</p>
                            <p>奖品信息 大产品</p>
                        </view>
                    </view>
                </view>
            </view>
            <view class="content">
                <p class="title">幸运抽奖，233人抽奖</p>
                <view class="row">
                    <view class="info clearfix">
                        <image src="/static/test/1.png"></image>
                        <view class="detail fl">
                            <p>大美丽</p>
                            <p>奖品信息 大产品</p>
                        </view>
                    </view>
                    <view class="info clearfix">
                        <image src="/static/test/1.png"></image>
                        <view class="detail fl">
                            <p>大美丽</p>
                            <p>奖品信息 大产品</p>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <button>参与下一个抽奖</button>
    </view>
</template>
<script>
export default {
    methods: {
        back() {
            uni.navigateBack();
        }
    }
}
</script>
<style lang="scss">
.winning_information {
    .header {
        padding: 40rpx 20rpx 40rpx;
        background-color: aqua;
        .zj {
            font-size: 40rpx;
            font-weight: bold;
            color: #868686;
            margin-bottom: 30rpx;
        }
        .text {
            line-height: 50rpx;
        }
        button {
            width: 200rpx;
            font-size: 30rpx;
            margin: 50rpx 0;
        }
    }
    .content {
        background-color: #FFF;
        margin: 20rpx;
        border-radius: 20rpx;
        .title {
            text-align: center;
            padding: 20rpx;
            background-color: #F5F8FF;
            border-radius: 20rpx;
        
        }
        .row {
            padding: 0 20rpx 20rpx;
            .info {
                padding: 20rpx;
                border-bottom: 1px solid #B7B7B7;
                image {
                    float: left;
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 20rpx;
                }
                .detail {
                    margin-left: 20rpx;
                    p {
                        line-height: 50rpx;
                    }
                }
                &:last-child {
                    border: none;
                }
            }
        }
        &:first-child {
            margin-top: -50rpx;
        }
    }
}
</style>